import {Button, ScrollView, View} from '@tarojs/components'
import {inject, observer} from 'mobx-react'

import './index.less'
import BaseComponent from "../../BaseComponent";
import BluDeviceComService from "../../../service/BluDeviceComService";
import {observable, runInAction} from "mobx";
import LogService from "../../../service/LogService";
import MessageConfig from "../../../config/MessageConfig";
import EventUtils from "../../../utils/EventUtils";
import BleDeviceService from "../../../service/BleDeviceService";
import {PackageFactory} from "../../../service/LightTpService";
import {BuffUtils} from "../../../utils/BuffUtils";
import CmdSendView from "./CmdSendView";
import {AtModal, AtModalAction, AtModalContent, AtModalHeader} from "taro-ui";


@inject('store')
@observer
class DeviceCom extends BaseComponent {

  @observable deviceId = "EF:36:8E:83:B3:DC";
  @observable msgs = [];
  @observable connected = false;
  @observable isOpened = false;

  getTag() {
    return "DeviceCom";
  }

  // onLoad
  onLoad(option) {
    super.onLoad(option);

    BleDeviceService.openBlu();
    if (!!option.deviceId){
      this.deviceId = option.deviceId;
      LogService.debug("deviceId", this.deviceId);
    }

    // let arr = PackageFactory.setDelayClose(0xffff);
    // LogService.debug("setDelayClose", BuffUtils.to16(arr));
  }

  componentWillMount() {
    super.componentWillMount();
    EventUtils.on(MessageConfig.BlE_SEND_TYPE, this.sendCallBack);
    EventUtils.on(MessageConfig.BlE_RECV_TYPE, this.recvCallBack);

    EventUtils.on(MessageConfig.BlE_CONNECT_TYPE, (res)=> {
      runInAction(() =>{
        this.connected = res.connected;
        LogService.debug("BlE_CONNECT_TYPE", res);
      })
    });

    this.connected = BluDeviceComService.connected;
  }

  componentWillUnmount() {
    super.componentWillUnmount();
    EventUtils.off(MessageConfig.BlE_SEND_TYPE, this.sendCallBack);
    EventUtils.off(MessageConfig.BlE_RECV_TYPE, this.recvCallBack);
    EventUtils.off(MessageConfig.BlE_CONNECT_TYPE);

    BluDeviceComService.disconnetBlue(this.deviceId);
  }

  connect = ()=>{
    BluDeviceComService.connetBlue(this.deviceId);
  }

  sendData = ()=>{
    BluDeviceComService.sendData(this.deviceId, [1,2,3,4,5,6,7,8,9]);
  }

  sendCallBack = (res) =>{
    LogService.info("sendCallBack", res);
    const {data, sucess} = res;
    this.msgs.push(`发送(${sucess?"成功":"失败"}):${BuffUtils.to16(data)}`);
  }

  recvCallBack = (res) =>{
    const {data} = res;
    this.msgs.push(`接收数据:${BuffUtils.to16(data)}`);
  }

  getMsgView = ()=>{
    return this.msgs.map(msg =>{
      return <View>{`${msg}`}</View>
    })
  }

  mangerConnect = ()=>{
    if (this.conencted){
      BluDeviceComService.disconnetBlue(this.deviceId);
    }else{
      BluDeviceComService.connetBlue(this.deviceId);
    }
  }

  render() {

    let connectText = "连接设备";
    if (this.connected)
      connectText = "已经连接 断开设备";

    return (
      <View className='devicecom'>

        <View>{'mac:'+this.deviceId}</View>

        <View style="marginTop: 10px">消息列表:</View>
        <ScrollView
          className='msg'
          scrollY={true}
          scrollWithAnimation={true}
        >
          {
            this.getMsgView()
          }
        </ScrollView>

        <Button type='warn' onClick={() => {this.msgs.splice(0, this.msgs.length);}}>
          清空收发数据
        </Button>

        <view style="marginTop: 20px"/>
        <Button onClick={() => {this.mangerConnect();}}>{connectText}</Button>
        <Button onClick={() => {this.sendData();}}>测试发送数据</Button>

        <Button onClick={() => {this.isOpened = true}}>设备命令测试</Button>

        <AtModal isOpened={this.isOpened}>
          <AtModalHeader>设备命令测试</AtModalHeader>
          <AtModalContent>
            <CmdSendView deviceId={this.deviceId}/>
          </AtModalContent>
          <AtModalAction><Button onClick={()=>{this.isOpened = false}}>关闭</Button> </AtModalAction>
        </AtModal>

      </View>
    )
  }
}

export default DeviceCom;
